// 主题配色方案
const theme = {
  // 主色调
  primary: {
    light: '#a18cd1',
    main: '#fbc2eb',
    gradient: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)'
  },

  // 功能色
  functional: {
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
    info: '#3b82f6'
  },

  // 文字颜色
  text: {
    primary: '#1a1a1a',
    secondary: '#64748b',
    disabled: '#94a3b8',
    hint: '#cbd5e1'
  },

  // 背景色
  background: {
    default: '#f8fafc',
    paper: '#ffffff',
    hover: '#f3f4f6',
    active: '#e5e7eb'
  },

  // 边框颜色
  border: {
    light: '#edf2f7',
    main: '#e2e8f0'
  },

  // 阴影
  shadows: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
  },

  // 过渡动画
  transitions: {
    default: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    fast: 'all 0.2s ease',
    slow: 'all 0.4s ease'
  }
}

// 创建 CSS 变量字符串
const createCssVariables = () => {
  return /*css*/`
    :root {
      --color-primary-light: ${theme.primary.light};
      --color-primary-main: ${theme.primary.main};
      --color-primary-gradient: ${theme.primary.gradient};
      
      --color-success: ${theme.functional.success};
      --color-warning: ${theme.functional.warning};
      --color-error: ${theme.functional.error};
      --color-info: ${theme.functional.info};
      
      --text-primary: ${theme.text.primary};
      --text-secondary: ${theme.text.secondary};
      --text-disabled: ${theme.text.disabled};
      --text-hint: ${theme.text.hint};
      
      --bg-default: ${theme.background.default};
      --bg-paper: ${theme.background.paper};
      --bg-hover: ${theme.background.hover};
      --bg-active: ${theme.background.active};
      
      --border-light: ${theme.border.light};
      --border-main: ${theme.border.main};
      
      --shadow-sm: ${theme.shadows.sm};
      --shadow-md: ${theme.shadows.md};
      --shadow-lg: ${theme.shadows.lg};
      
      --transition-default: ${theme.transitions.default};
      --transition-fast: ${theme.transitions.fast};
      --transition-slow: ${theme.transitions.slow};
    }
  `
}

export const cssVariables = createCssVariables()
export { theme } 